<template>
  <div>
    <van-nav-bar fixed :title="name" placeholder left-text="返回">
      <template #left>
        <van-icon name="arrow-left" color="#333" size="18" @click="gotoback" />
      </template>
    </van-nav-bar>
    <div v-if="isLoad">
      <van-skeleton title :row="5" />
    </div>
    <div v-else>
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <!-- <van-cell v-for="item in list" :key="item" :title="item" /> -->
        <div class="lists">
          <div
            v-for="(item, index) in IpadList"
            :key="index"
            class="miniStreamViews"
            @click="goToInfo(item.goods_id)"
          >
            <van-image
              class="img"
              fit="contain"
              v-lazy
              :src="url + item.original_img"
            />
            <div class="text-warps" :title="item.goods_name">
              {{ item.goods_name }}
            </div>
            <div class="prices">${{ item.market_price }}</div>
          </div>
        </div>
      </van-list>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      isLoad: true,
      IpadList: [],
      name: "",
      url: "https://img.9lele.com",
      page: 1,
      // limmit: 10,
      loading: false,
      finished: false,
      length:''
    };
  },
  mounted() {
    setTimeout(
      function () {
        this.isLoad = false;
      }.bind(this),
      500
    );
  },
  computed: {
    ...mapGetters(["ipadlist"]),
  },
  methods: {
    onLoad() {
      let list_id = this.$route.query.id;
      let obj = {
        id: list_id,
        page: this.page,
      };

      this.$store.dispatch("apple/IpadList", obj).then((e) => {
        this.length = e.data.data.length
        console.log(list_id);
        e.data.data.map((v) => {
          this.IpadList.push(v);
          // console.log(v)
        });

        console.log(this.IpadList, 11111);
        setTimeout(() => {
          if (this.refreshing) {
            this.IpadList = [];
            this.refreshing = false;
          }
          if (this.length == 0) {
            this.finished = true;
          }
          this.page++;
          this.loading = false;
        }, 1000);
      });
    },
    goToInfo(id) {
      this.$router.push({ path: "/info", query: { id: id } });
    },
    gotoback() {
      this.$router.go(-1);
    },
  },
  created() {
    this.onLoad();
    this.name = this.$route.query.name;
  },
};
</script>

<style>
.lists {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.miniStreamViews {
  width: 44%;
  height: 15rem;
  /* height: 20vh; */
  background-color: #fff;
  border-radius: 10px;
  margin: 0 3%;
  margin-top: 2%;
}
::-webkit-scrollbar {
  width: 0px;
}
.text-warps {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  margin-left: 3%;
  font-size: 1.1rem;
}
.img {
  width: 100%;
  height: 80%;
}
.prices {
  text-align: left;
  margin-left: 3%;
  color: rgba(255, 38, 0, 0.575);
}
</style>